<template>
    <a-card style="width: 100%">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic title="总阅读数" :value="today.viewCount" class="demo-class">
            <template #prefix>
              <eye-outlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic title="总点赞数" :value="today.voteCount" style="margin-right: 50px">
            <template #prefix>
              <like-outlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic
              title="点赞率"
              :value="today.voteCount / today.viewCount * 100"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#cf1322' }"
              style="margin-right: 50px"
          >
          </a-statistic>
        </a-col>
      </a-row>
    </a-card>
    <a-row :gutter="16" style="margin-top: 20px">
      <a-col :span="11">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="今日阅读数" :value="today.viewIncrease" class="demo-class">
                <template #suffix>
                  <eye-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic title="今日点赞数" :value="today.voteIncrease" class="demo-class">
                <template #prefix>
                  <like-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="11">
        <a-card>
          <a-row>
            <a-col :span="12">
              <a-statistic title="预计今日阅读数" :value="today.todayView" class="demo-class">
                <template #suffix>
                  <eye-outlined />
                </template>
              </a-statistic>
            </a-col>
            <a-col :span="12">
              <a-statistic
                  title="预计今日阅读增长"
                  :value="today.increaseAbs"
                  :precision="2"
                  v-if="today.increase < 0"
                  suffix="%"
                  :value-style="{ color: '#3f8600' }"
                  style="margin-right: 50px"
              >
                <template #prefix>
                  <arrow-down-outlined />
                </template>
              </a-statistic>
              <a-statistic
                  title="预计今日阅读增长"
                  :value="today.increaseAbs"
                  :precision="2"
                  v-if="today.increase > 0"
                  suffix="%"
                  :value-style="{ color: '#cf1322' }"
                  style="margin-right: 50px"
              >
                <template #prefix>
                  <arrow-up-outlined />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 20px">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 100%;height:400px;"></div>
    </a-row>

</template>

<script>

import {EyeOutlined, LikeOutlined, ArrowUpOutlined, ArrowDownOutlined} from "@ant-design/icons-vue";
import {ref} from "vue";
import axios from "axios";

export default {
  name: 'welcome',
  components:{
    LikeOutlined,
    EyeOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined

  },
  setup(){
    const yesterday = ref({});
    let today = ref({});
    const getInfo = () =>{
       axios.get("/snapshot/get-info").then((res) => {
         const data = res.data;
         if (data.code == 200){
           const snapshots = data.data;
           console.log(snapshots);


           if (snapshots.length < 2){
              today.value = snapshots[0];
              yesterday.value  = {
                viewCount: 0,
                voteCount: 0,
                viewIncrease: 0
              }
           } else {
             yesterday.value  = snapshots[0];
             today.value  = snapshots[1];
           }

           // 预计今日阅读
           const now = new Date();
           // 按分钟预测今日阅读数
           today.value.todayView = Math.ceil(today.value.viewIncrease / (now.getHours() * 60 + now.getMinutes()) * (60 * 24)) ;

           // 阅读增长率 = (预计今天的阅读量 - 昨天的阅读量) / 昨天的阅读量 * 100;
           let temp = yesterday.value.viewIncrease == 0? 1:yesterday.value.viewIncrease;

           today.value.increase = (today.value.todayView - yesterday.value.viewIncrease) / temp;

           today.value.increaseAbs = Math.abs(today.value.increase) * 100;
         }
       });
    }


    const initChart = () => {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'));


      const dates = [];
      const view = [];
      const vote = [];
      axios.get("/snapshot/get-info30").then((res) => {
          const data = res.data;
          if (data.code == 200){
           const list = data.data;
            for (let obj of list) {
              dates.push(obj.date);
              view.push(obj.viewIncrease);
              vote.push(obj.voteIncrease);
            };
            // 指定图表的配置项和数据
            const option = {
              title: {
                text: '近 30 天的阅读和点赞情况'
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['阅读数', '点赞数']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                feature: {
                  saveAsImage: {}
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dates
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  name: '阅读数',
                  type: 'line',
                  stack: 'Total',
                  data: view
                },
                {
                  name: '点赞数',
                  type: 'line',
                  stack: 'Total',
                  data: vote
                }
              ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
          }
      });


    }
    return{
      today,
      getInfo,
      initChart
    }
  },
  mounted() {
    this.getInfo();
    this.initChart();
  }
}

</script>
<style scoped>

</style>
